<template>
  <div class="box">
    <div class="condition" >
      <!-- <div>分站</div> -->
      <div>
        <el-autocomplete v-model="tableData1" style="width: 370px" value-key="location"
          :fetch-suggestions="querySearchAsync" placeholder="模糊查询" />
      </div>
      <div><el-button type="warning" @click="MuHuChaXun">查询</el-button></div>
      <div v-if="getUser">
        <el-button type="success" @click="Export" plain>导出
          <xslx ref="xslx" />
        </el-button>
      </div>
      <div v-if="getUser">
        <el-button type="success" @click="add(null)">添加测点</el-button>
      </div>
    </div>
    <div class="table">
      <el-table :data="tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)" :header-cell-style="{
          background: 'rgb(40,103,185)',
          color: 'white',
          borderColor: 'rgb(43,88,144)',
          'text-align': 'center',
        }" :cell-style="{ 'text-align': 'center' }" height="700" style="width: fit-content; padding: 0; height: 700px">
        <el-table-column prop="SubNo" label="分站编号" width="150">
        </el-table-column>
        <el-table-column prop="sensorState" label="检测状态" width="100">
        </el-table-column>
        <el-table-column prop="miningArea" label="检测采区" width="90">
        </el-table-column>
        <el-table-column prop="miningFace" label="斜井类型" width="120">
        </el-table-column>
        <el-table-column prop="miningTunnel" label="安装巷道" width="120">
        </el-table-column>
        <el-table-column prop="holeDeep" label="安装深度(m)" width="90">
        </el-table-column>
        <el-table-column prop="miningGroup" label="端面分组" width="90">
        </el-table-column>
        <el-table-column prop="faceDistance" label="距井口" width="90">
        </el-table-column>
        <el-table-column prop="basicPoint" label="安装基点" width="120">
        </el-table-column>
        <el-table-column prop="location" label="安装位置" width="350">
        </el-table-column>
        <el-table-column prop="sensorStyle" label="传感器类型" width="120">
        </el-table-column>
        <el-table-column prop="factoryNum" label="传感器编号" width="120">
        </el-table-column>
        <el-table-column prop="sysNum" label="监测点编号" width="350">
        </el-table-column>
        <el-table-column prop="installTime" label="安装日期" width="200">
        </el-table-column>
        <el-table-column prop="sensorChannel" label="物理通道" width="120">
        </el-table-column>
        <el-table-column prop="unit" label="计量单位" width="120">
        </el-table-column>
        <el-table-column prop="alarm_01" label="预警值" width="120">
        </el-table-column>
        <el-table-column prop="alarm_02" label="报警值" width="120">
        </el-table-column>
        <el-table-column prop="calibrationValue" label="实测数值" width="120">
        </el-table-column>
        <el-table-column prop="calculationData" label="校准数值" width="120">
        </el-table-column>
        <el-table-column prop="calibrationIntercept" label="计算截距" width="220">
        </el-table-column>
        <el-table-column prop="factoryWavelength_01" label="波长1" width="120">
        </el-table-column>

        <el-table-column prop="factoryWavelength_02" label="波长2" width="120">
        </el-table-column>

        <el-table-column prop="factoryWavelength_03" label="波长3" width="120">
        </el-table-column>

        <el-table-column prop="factoryWavelength_04" label="波长4" width="120">
        </el-table-column>
        <el-table-column prop="factoryWavelength_04Up" label="波长4上限" width="120">
        </el-table-column>
        <el-table-column style="background-color: red;" label="操作" v-if="getUser" fixed="right" width="140"
          :cell-style="{ 'text-align': 'center' }">
          <template slot-scope="scope" style="background-color: red;">
            <el-button size="mini" @click="add(scope.row)">编辑</el-button>
            <el-button size="mini" type="danger" @click="delClick(scope.row.installInfoId)">删除</el-button>
          </template>
          <el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
            <span>这是一段信息</span>
            <span slot="footer" class="dialog-footer">
              <el-button @click="dialogVisible = false">取 消</el-button>
              <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
            </span>
          </el-dialog>

        </el-table-column>
      </el-table>
      <div class="block" style="width: 100%; text-align: center; margin-top: 10px">
        <el-pagination @size-change="handleSizeChange1" @current-change="handleCurrentChange1"
          :current-page="currentPage4" :page-sizes="[pageSize]" layout="total, sizes, prev, pager, next, jumper"
          :total="tableData.length">
        </el-pagination>
      </div>
    </div>
    <add-edit ref="addedit" />
  </div>
</template>

<script>
import AddEdit from "./AddEdit/add_and_xiu_CeDianPeiZhi.vue";
import xslx from "../../components/xslx.vue";
import {
  dingbancedianxinxilist,
  dingbanshebeipeizhimohuchaxun,
  dingbancedianxinxidel,
} from "../../https/api/user";
export default {
  components: { xslx, AddEdit },
  data() {
    return {
      pageSize: 12,
      currentPage: 1,
      currentPage4: 1,
      IsshowBianHao: false,
      timeout: null,
      tableData1: "",
      tableData: [],
      riqi: "",
      input: "",
      Isshow: false,
      dialogVisible: false,
      getUser: ''


    };
  },
  mounted() {
    this.OnList();
    this.getUser = localStorage.getItem('User') == 'user' ? false : true

  },
  methods: {
    handleSizeChange1(val) {
      this.$data.pageSize = val;
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange1(val) {
      console.log(`当前页: ${val}`);

      this.$data.currentPage = val;
    },
    handleSizeChange(val) {
      this.$data.pageSize = val;
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);

      this.$data.currentPage = val;
    },
    Export() {
      const data = [
        [
          "分站编号",
          "检测状态",
          "检测采区",
          "斜井类型",
          "安装巷道",
          "安装深度",
          "端面分组",
          "距井口",
          "安装基点",
          "安装位置",
          "传感器类型",
          "出厂编号",
          "监测点编号",
          "安装日期",
          "物理通道",
          "计量单位",
          "预警值",
          "报警值",
          "实测数值",
          "校准数值",
          "计算截距",
          "波长1",
          "波长1上限",
          "波长1下限",
          "波长2",
          "波长2上限",
          "波长2下限",
          "波长3",
          "波长3上限",
          "波长3下限",
          "波长4",
          "波长4上限",
          "波长4下限",
        ],
      ];
      this.tableData.forEach((item) => {
        data.push([
          item.SubNo,
          item.sensorState,
          item.miningArea,
          item.miningFace,
          item.miningTunnel,
          item.holeDeep,
          item.faceDistance,
          item.faceDistance,
          item.basicPoint,
          item.location,
          item.sensorStyle,
          item.factoryNum,
          item.sysNum,
          item.installTime,
          item.sensorChannel,
          item.unit,
          item.alarm_01,
          item.alarm_02,
          item.calibrationValue,
          item.calculationData,
          item.calibrationIntercept,
          item.factoryWavelength_01,
          item.factoryWavelength_01Up,
          item.factoryWavelength_01Down,
          item.factoryWavelength_02,
          item.factoryWavelength_02Up,
          item.factoryWavelength_02Down,
          item.factoryWavelength_03,
          item.factoryWavelength_03Up,
          item.factoryWavelength_03Down,
          item.factoryWavelength_04,
          item.factoryWavelength_04Up,
          item.factoryWavelength_04Down,
        ]);
      });
      this.$refs.xslx.xslx(data);
      console.log(this.$refs);
    },
    add(data) {
      console.log(data);
      // 打开对话框方法，接收表单数据，如果数据为null则新增否则为编辑
      // 点击新增和修改调用同一个方法，方法接收一个参数用来修改时回显数据
      // 新增时表单数据为空所以传null，，，，修改需要把需要修改的数据显示在表单上
      this.$refs.addedit.show(data);
    },

    OnList() {
      dingbancedianxinxilist().then((res) => {
        console.log("测点列表", res);
        if (res) {
          this.tableData = res;
        }
      });
    },
    // 模糊查询 搜索
    MuHuChaXun() {
      const data = {
        names: this.tableData1,
      };
      dingbanshebeipeizhimohuchaxun(data).then((res) => {
        console.log("模糊查询", res);
        if (res) {
          this.tableData = res;
        }
        // debugger
      });
    },
    handleSelect(item) {
      console.log(">>>>>", item);
    },
    add(data) {
      // 打开对话框方法，接收表单数据，如果数据为null则新增否则为编辑
      this.$refs.addedit.show(data);
      console.log(data);
    },
    tuichu() {
      this.Isshow = false;
    },
    handleClick(row) {
      console.log("修改", row);
    },
    delClick(x) {
      this.$confirm('是否删除这条数据？')
        .then(_ => {
          // console.log("删除", x);
          const data = {
            id: x,
          };
          dingbancedianxinxidel(data).then((res) => {
            if (res) {
              this.$message({
                message: '删除成功',
                type: 'success'
              });
            }
            this.OnList();
          });
        })
        .catch(_ => { });


    },

    querySearchAsync(queryString, cb) {
      queryString = queryString.toLowerCase();

      function filter(item) {
        if (item && item.length > 0) {
          console.log(item);
          const sysNum = item.a.toLowerCase();
          return sysNum.includes(queryString);
        }
      }
      var restaurants = this.tableData;
      var results = queryString ? restaurants.filter(filter) : restaurants;
      cb(results);
    },
  },
};
</script>

<style lang="less" scoped>
.box {
  width: 100%;
  padding: 0 20px;

  .condition {
    width: 100%;
    height: 40px;
    display: flex;
    align-items: center;

    >div:nth-child(1) {
      color: white;
    }

    >div:nth-child(2) {
      margin-left: 7px;

      .el-select {
        /deep/.el-input__inner {
          background-color: rgb(14, 26, 55);
          color: #fff;
          border: 1px solid rgb(40, 103, 185);
        }
      }

      .el-select-dropdown__item {
        font-size: 7px;
        line-height: 19px;
        color: #fff;
        font-weight: 200;
        background-color: #003e00;
      }
    }

    >div:nth-child(3) {
      margin-left: 7px;
    }

    >div:nth-child(4) {
      margin-left: 7px;
    }

    >div:nth-child(5) {
      margin-left: 7px;
    }
  }
}

::v-deep .el-table,
.el-table__expanded-cell {
  background-color: transparent !important;
}

::v-deep .el-table tr {
  background-color: transparent !important;
}

::v-deep .el-table--enable-row-transition .el-table__body td,
::v-deep .el-table .cell {
  background-color: transparent !important;
  color: rgb(255, 255, 255) !important;
  border: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

::v-deep .el-table th>.cell {
  color: rgba(254, 254, 254, 1) !important;
  font-weight: 700 !important;
}

.el-table::before {
  //去除底部白线
  left: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 0px !important;
}

.table {
  width: 100%;
  height: 750px;
  margin-top: 10px;
}

::v-deep .el-table__fixed {
  // 左固定列
  height: auto !important;
  bottom: 12px; // 改为自动高度后，设置与父容器的底部距离，高度会动态改变，值可以设置比滚动条的高度稍微大一些,这个根据实际情况改
}

::v-deep .el-table__fixed-right {
  // 右固定列
  height: auto !important;
  bottom: 12px;
}

/deep/ .el-table__body-wrapper {
  height: 750px;
  /* 滚动条整体高 必须项 */
  border-right: none;
  overflow-y: scroll;
  /* overflow-y为了不出现水平滚动条*/
}

/deep/ .el-table__body-wrapper::-webkit-scrollbar {
  width: 5px;
  /* 滚动条的宽高 必须项 */
  height: 10px;
}

/deep/ .el-table__body-wrapper::-webkit-scrollbar-thumb {
  border-radius: 10px;
  /*滚动条的圆角*/
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  background-color: #409eff;
  /*滚动条的背景颜色*/
}

.el-table__body-wrapper {
  overflow-x: auto;
}

/deep/.el-table_7_column_189 /deep/.el-table__cell {
  background-color: saddlebrown;
}
</style>